{% extends '__base__.html' %} {% block title %}Blogs{% endblock %} {% block content %}

<div class="row">
	<div id="left-block" class="col-md-9">

		{% for blog in blogs %}
		<h1 class="blog-title">
			<a href="/blog/{{ blog.id }}">{{ blog.name }}</a>
		</h1>

		<div class="blog-meta">
			<i class="fa fa-clock-o" aria-hidden="true"></i> {{ blog.created_at|datetime }} &nbsp;&nbsp;&nbsp;&nbsp; {% for t in blog.tag.split(',')
			%}
			<i class="fa fa-folder-open-o fa-fw" aria-hidden="true"></i>
			<span class="blog-tags"><a href="/blogs?tag={{t}}">{{t}}</a></span> {% endfor %}
		</div>
		<div class="meta-seperator"></div>

		<article class="blog-summary">
			{{ blog.content|safe }}
		</article>
		<p><a class="readmore-btn" href="/blog/{{ blog.id }}">Read more...</a></p>
		<div class="blog-seperator"></div>
		{% endfor %}
	</div>

	<div id="right-block" class="col-md-3 hidden-sm hidden-xs hidden-print" role="complementary">
		<!-- here is the place for blogs -->
		<nav class="right-navbar">
			<div id="right-container" class="container-fluid">
				<h3 id="whyuclick">DON'T CLICK ME!</h3>
				<div id="scareu">
					<img id="selfie" class="img-responsive img-circle" src="/static/photos/me.jpg">
					<p>&nbsp;&nbsp;Oh,gosh! You scared me!</p>
				</div>
				<div class="right-nav-seperator"></div>
				<h3>TAGS</h3>
				<ul class="tag-list">

					{% for tag in tags %}
					<li class="tag-item">
						<i class="fa fa-folder-open-o fa-fw" aria-hidden="true"></i>
						<a href="/blogs?tag={{ tag.name}}"> {{tag.name}}</a>
					</li>
					{% endfor %}
				</ul>
				<div class="right-nav-seperator"></div>
			</div>
		</nav>
	</div>

	<div class="col-xs-12">
		<nav class="text-center">
			<ul class="pagination">
				<li class="{{'active' if page.index == 1}}"><a href="?tag={{tag}}&page=1&size={{page.limit}}">1</a></li>
				{% if (page.index - 1) > 3 %}
				<li class="disabled"><span>...</span></li>
				{% endif %} {% for index in range(2, page.last) if (index - page.index) | abs
				< 3%} <li class="{{'active' if page.index == index}}"><a href="?tag={{tag}}&page={{index}}&size={{page.limit}}">{{ index }}</a></li>
					{% endfor %} {% if (page.last - page.index) > 3 %}
					<li class="disabled"><span>...</span></li>
					{% endif %} {% if page.last > 1 %}
					<li class="{{'active' if page.index == page.last}}"><a href="?tag={{tag}}&page={{page.last}}&size={{page.limit}}">{{page.last}}</a></li>
					{% endif %}
			</ul>
		</nav>
	</div>

	{% endblock %} {% block script %}

	<script type="text/javascript">
    navactive = document.getElementById("blogs");
    navactive.className = "active";
</script>
	<script>
        <!-- put script here -->
        $(document).ready(function () {
            $('#whyuclick').click(function () {
                $('#scareu').toggle(3000);
            });
        });
</script> {% endblock %}